<template>
    <view class="main">
        <wd-overlay :show="show" @click="emits('close', 'cancel')">
            <view class="wrapper">
                <view class="tip-box">
                    <view>
                        <view class=" tip-title">行驶证正本正面</view>
                        <view class="tip">
                            <text class="tip-text w">·&nbsp;&nbsp;取出行驶证内页，</text>
                            <text class="tip-text o">如下图摆放</text>
                            <text class="tip-text w">拍摄</text>
                        </view>
                        <view class="tip">
                            <text class="tip-text w">·&nbsp;&nbsp;保证正页中的车牌号清晰可见</text>
                        </view>
                        <view class="tip">
                            <text class="tip-text w">·&nbsp;&nbsp;四角可见，</text>
                            <text class="tip-text o">无遮挡，无反光</text>
                        </view>
                    </view>
                </view>
                <view class="temp-box">
                    <view class="temp">
                        <image src="/static/image/xsz.png" mode="widthFix" />
                    </view>
                </view>
            </view>
        </wd-overlay>
    </view>
</template>

<script setup>
import { ref, watch } from 'vue'
import { BASE_URL } from '@/config/init'


const emits = defineEmits(['close', 'upload'])

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
})

watch(() => props.show, (newVal) => {
    if (newVal) {
        uploadImage(1)
    }
})

function uploadImage(limit = 1) {
    uni.chooseImage({
        count: limit,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: function (res) {
            uni.uploadFile({
                url: BASE_URL + '/common/upload', // 上传图片的服务器地址
                filePath: res.tempFilePaths[0],
                name: "file",
                header: {
                    'Authorization': 'Bearer ' + uni.getStorageSync('token'),
                    'Content-Type': 'multipart/form-data'
                },
                success: function (res) {
                    emits('upload', JSON.parse(res.data))
                },
                fail: function (res) {
                    emits('close', 'cancel')
                    uni.showToast({
                        title: '上传失败',
                        icon: 'none',
                    })
                }
            });
        },
        fail: function (res) {
            uni.showToast({
                title: '您取消了上传',
                icon: 'none',
            })
            emits('close', 'fail')
        }
    });
}
</script>

<style lang="scss" scoped>
.wrapper {
    .tip-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;

        .tip-title {
            font-weight: 900;
            font-size: 40rpx;
            color: #fff;
            text-align: center;
            margin-bottom: 30rpx;
        }

        .tip {

            margin-bottom: 20rpx;

            .tip-text {
                font-weight: 50rpx;
                font-weight: 900;
            }

            .w {
                color: #fff;
            }

            .o {
                color: #c06c31;
            }
        }
    }

    .temp-box {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 70rpx;
    }

    .temp {
        width: 80%;


        image {
            width: 100%;
            height: 100%;
        }
    }
}
</style>